<template>
  <div class="header-box">
    <van-nav-bar
      :border="false"
      :title="tittle"
      fixed="fixed"
      @click-right="showSearchPopup"
    >
      <template #right>
        <van-icon name="search" />
      </template>
    </van-nav-bar>
    <van-popup v-model="popupVisible" ref="popupSearch">
      <div class="popup">
        <div class="popup-search">
          <form action="/">
            <van-search
              v-model="searchContent"
              show-action
              shape="round"
              autofocus
              placeholder="请输入搜索关键词"
              @search="searchBook"
              @cancel="searchCancle"
            />
          </form>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data () {
    return {
      popupVisible: false,
      searchContent: ''
    }
  },
  props: {
    tittle: {
      type: String,
      default: '标题'
    }
  },
  methods: {
    getfocus () {
      this.$nextTick(() => {
        let cancel = this.$refs.popupSearch.$el.querySelectorAll('.van-field__control')[0]
        cancel.focus()
      }, 100)
    },
    showSearchPopup () {
      this.popupVisible = true
      this.getfocus()
    },
    searchBook () {
      this.$router.togo({
        name: 'searchResult',
        query: {
          content: this.searchContent
        }
      }, 'van-slide-right')
    },
    searchCancle () {
      this.popupVisible = false // 取消事件
      this.searchContent = ''
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/styles/index.less";
@import "~@/styles/variable.less";
.header-box {
  width: 100%;
  height: 50px;
  display: table;
}
.van-popup {
  width: 100%;
  height: 100%;

  .popup {
    .popup-search {
      background-color: @base-header-color;
    }
  }
}
</style>
